Dashboard Temp Share Shortlinks Frames API

HTMLify

index.html
Views: 338 | Author: cody 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Fill In Tab Bar Menu Animation</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link rel='stylesheet' type='text/css' media='screen' href='style.css'>
    <script src="https://code.jquery.com/jquery-3.6.3.min.js"
        integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" crossorigin="anonymous"></script>
</head>

<body>
    <div class="tabs">
        <!-- TAB 1 -->
        <input type="radio" name="tab" id="tab-01" checked />
        <label for="tab-01">
            <svg>
                <use xlink:href="#icon-01" class="icon" />
            </svg>
            <div class="wave"></div>
        </label>

        <!-- TAB 2 -->
        <input type="radio" name="tab" id="tab-02" />
        <label for="tab-02">
            <svg>
                <use xlink:href="#icon-02" class="icon" />
            </svg>
            <div class="wave"></div>
        </label>

        <!-- TAB 3 -->
        <input type="radio" name="tab" id="tab-03" />
        <label for="tab-03">
            <svg>
                <use xlink:href="#icon-03" class="icon" />
            </svg>
            <div class="wave"></div>
        </label>

        <!-- TAB 4 -->
        <input type="radio" name="tab" id="tab-04" />
        <label for="tab-04">
            <svg>
                <use xlink:href="#icon-04" class="icon" />
            </svg>
            <div class="wave"></div>
        </label>
    </div>

    <!-- SVG -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-01">
            <path
                d="M13.93,1H20.8A4.21,4.21,0,0,1,25,5.2V20.8A4.21,4.21,0,0,1,20.8,25H5.2A4.21,4.21,0,0,1,1,20.8V5.2A4.21,4.21,0,0,1,5.2,1h.47" />
            <line x1="16" y1="10" x2="18" y2="10" />
            <line x1="8" y1="10" x2="12" y2="10" />
            <line x1="8" y1="15" x2="18" y2="15" />
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-02">
            <path
                d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1" />
            <polygon points="15 14.33 11 17 11 11.67 15 9 15 14.33" />
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-03">
            <path
                d="M7.91,2.08a11.15,11.15,0,0,0-5.73,9.81v6a7.83,7.83,0,0,1-1,2.92A1.47,1.47,0,0,0,2.43,23H23.57a1.47,1.47,0,0,0,1.26-2.16,7.83,7.83,0,0,1-1-2.92v-6A11.06,11.06,0,0,0,15.18,1" />
            <path d="M15,23a2,2,0,0,1-4,0" />
            <path d="M16,5.51A6.53,6.53,0,0,1,19.65,9.4" />
        </symbol>
        <symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-04">
            <path
                d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1" />
            <path d="M18,18.26a8,8,0,0,1-10.09-.1" />
        </symbol>
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
        <clipPath id="path-icon-01">
            <path
                d="M13.93,1H20.8A4.21,4.21,0,0,1,25,5.2V20.8A4.21,4.21,0,0,1,20.8,25H5.2A4.21,4.21,0,0,1,1,20.8V5.2A4.21,4.21,0,0,1,5.2,1h.47" />
        </clipPath>
        <clipPath id="path-icon-02">
            <path
                d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1" />
        </clipPath>
        <clipPath id="path-icon-03">
            <path
                d="M7.91,2.08a11.15,11.15,0,0,0-5.73,9.81v6a7.83,7.83,0,0,1-1,2.92A1.47,1.47,0,0,0,2.43,23H23.57a1.47,1.47,0,0,0,1.26-2.16,7.83,7.83,0,0,1-1-2.92v-6A11.06,11.06,0,0,0,15.18,1" />
        </clipPath>
        <clipPath id="path-icon-04">
            <path
                d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1" />
        </clipPath>
    </svg>
</body>

</html>

Share this file: